/*
 * @Description: 页面头部
 * @Author: kanglin
 * @Date: 2018-12-25 14:28:16
 * @Copyright: Created by Panxsoft.
 */
<style lang="less" scoped rel="stylesheet/less" type="text/less" >
    @import '~src/assets/css/common.less';
    .v-com-header{
        position: relative;
        background: #ffffff;
        padding: 24* @rem-per-px 40* @rem-per-px;
        height:48*@rem-per-px;
        box-shadow:0 4px 12px rgba(14,21,86,0.08);
        .title{
            text-align: center;
            height:48*@rem-per-px;
            line-height: 48*@rem-per-px;
            font-size: 32*@rem-per-px;
			font-weight:bold;
			max-width: 7rem;
			overflow: hidden;
			margin: 0 auto;
			text-overflow: ellipsis;
			white-space: nowrap;
        }
    }
</style>

<template>
	<div class="v-com-header">
		<back @click.native="handleClick"/>
		<h3 class="title">{{ title }}</h3>
	</div>
</template>

<script>
import back from 'src/views/component/back';

/**
 * 页面头部组件
 * @vue-prop {string} [title=''] 页面标题
 * @vue-computed {getTitle} 页面标题
 */
export default {
	name: 'Header',
	components: {
		back,
	},
	props: {
		title: {
			type: String,
			default() {
				return '';
			},
		},
	},
	data() {
		return {

		};
	},
	computed: {
		getTitle() {
			return this.title;
		},
	},
	methods: {
		/**
		 * 处理头部返回按钮事件
		 * @return {undefined}
		 */
		handleClick() {
			this.$emit('back');
		},
	},
};
</script>
